<template>
  <div :style="{height: height + 'px'}" class="list-scroll">
    <cube-scroll
      :options="options"
      @pulling-down="onPullingDown"
      @pulling-up="onPullingUp"
      :data="listData"
      ref="scroll"
    >
      <ul class="list-scroll-content">
        <li class="noData" v-if="listData.length === 0">
          <div>
            <img src="../../assets/images/no-data.png" alt="">
            <p>您还没有相关的记录</p>
          </div>
        </li>
        <li @click="handleToDetail(item)" v-for="(item,index) in listData" :key="index" class="list-scroll-item">
          <h4>
            <span>事件编号：
              <span>{{ item.eventNumber }}</span>
              <i class="cubeic-notification" :class="timeStatus[item.timeStatu]" v-if="item.isTime && item.eventStatus !== 2"></i>
            </span>
            <span>{{ item.eventSource }}</span>
          </h4>
          <p>
            <span>上报时间：</span>
            <span>{{ item.startTime }}</span>
          </p>
          <p class="event-desc">
            <span>事件描述：</span>
            <span>{{ item.eventDesc }}</span>
          </p>
          <p>
            <span>事件地址：</span>
            <span>{{ item.eventAddress }}</span>
          </p>
        </li>
        <li class="noData" v-if="listData.length !== 0&&noMoreData">
          <div>
            <!-- <img src="../../assets/images/no-data.png" alt=""> -->
            <p>-------- 我是有底线的 --------</p>
          </div>
        </li>
      </ul>
    </cube-scroll>
  </div>
</template>

<script>
export default {
  data() {
    return {
      height: '',
      pullDownRefresh: {
        threshold: 60,
        stop: 40,
        txt: '更新成功'
      },
      timeStatus: ["text-success", "text-warning", "text-danger"]
    }
  },
  computed: {
    options() {
      return {
        pullDownRefresh: this.pullDownRefresh,
        pullUpLoad: true,
        scrollbar: true
      }
    },
  },
  props: {
    listData: {
      type: Array,
      default() {
        return []
      }
    },
    propsConfig: {
      type: Object,
      default() {
        return {
          eventNo: 'eventNo',
          eventSource: 'eventSource',
          createTime: 'createTime',
          eventType: 'eventType',
          description: 'description',
          address: 'address'
        }
      }
    },
    subtract: { //  减去部分值，页面在可视范围滚动
      type: Number,
      default: 88
    },
    noMoreData: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    listData(n) {
      this.setTimeStatus(n)
    }
  },
  mounted(){
    this.height = document.body.clientHeight - this.subtract
    this.setTimeStatus(this.listData)
  },
  methods: {
    onPullingDown(){
      this.$emit('onPullingDown')
    },
    onPullingUp(){
      this.$emit('onPullingUp')
    },
    handleToDetail(data){
      this.$emit('handleToDetail',data)
    },
    setTimeStatus(list) {
      list.forEach(item => {
        let timeStatu = 0;
        if (item.isTime && item.noticeTime && item.nowTime && item.endTime) {
          // 正常 1：绿色  警告 2:黄色 红色 3:超时
          const nowTime = new Date(item.nowTime).getTime();
          const endTime = new Date(item.endTime).getTime();
          const noticeTime = new Date(item.noticeTime).getTime();
          if (endTime - nowTime < 0) {
            timeStatu = 2;
          } else if (endTime - nowTime > 0 && noticeTime - nowTime < 0) {
            timeStatu = 1;
          } else {
            timeStatu = 0;
          }
        }
        item.timeStatu = timeStatu;
      });
    }
  }
}
</script>

<style lang="stylus" scoped>
.list-scroll{
  background:rgba(245,245,245,1);
  .list-scroll-content{
    width: 100%;
    .noData{
      width: 100%;
      height: 100%;
      margin-top 50px;
      &>div{
        width: inherit;
        text-align: center;
        img{
          width 90px;
          height: 90px;
        }
        p{
          font-size:14px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(153,153,153,1);
          line-height:14px;
        }
      }
    }
    .list-scroll-item{
      width:calc(100% - 24px);
      padding 0 12px;
      background:rgba(255,255,255,1);
      margin-top 10px;
      h4{
        width: 100%;
        height: 39px;
        position relative;
        display: flex;
        flex-flow: row nowrap;
        align-items center;
        justify-content space-between;
        .warning-btn{
          color: #F88B43!important;
        }
        &::after{
          position absolute
          content: ''
          bottom: 0;
          left: 0px;
          width: calc(100% + 12px);
          height: 1px;
          background:rgba(216,216,216,1);
        }
        span:nth-child(1){
          font-size:15px;
          font-family:PingFangSC-Medium;
          font-weight:500;
          color:rgba(4,48,102,1);
          span {
            font-size:13px;
            color:rgba(153,153,153,1);
          }
        }
        span:nth-child(2){
          font-size:13px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(153,153,153,1);
        }
      }
      p{
        width: inherit;
        margin-top: 12px;
        max-height 60px;
        display: flex;
        flex-flow row nowrap;
        align-items flex-start;
        justify-content flex-start;
        span:nth-child(1){
          font-size:14px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(51,51,51,1);
          white-space nowrap;
        }
        span:nth-child(2){
          font-size:14px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(102,102,102,1);
          white-space pre-wrap;
          overflow:hidden; 
          text-overflow:ellipsis;
          display:-webkit-box; 
          -webkit-box-orient:vertical;
          -webkit-line-clamp:2; 
        }
        &:last-child{
          padding-bottom: 8px;
          margin-top: 5px;
          span{
            line-height: 1.5
          }
        }
        &.event-desc{
          span{
            line-height: 1.5
          }
        }
      }
    }
  }
}

.cubeic-notification {
  margin-left:8px;
  color: #55b444;
}
// 事件状态
  .text-success {
    color: #55b444;
  }
  .text-warning {
    color: #f0b255;
  }
  .text-danger {
    color: #db5353;
  }
</style>
